<template>
  <div class="teacup">
    <span class="teacup-f" :style="{height:heightVar+'px'}"></span>
    <span class="percent">{{ waterPercent }}%</span>
    <span class="teacup-b" :style="{height:heightVar+'px'}"></span>
  </div>

</template>

<script>
export default {
  props: {
    heightPercent: {//高度的百分比
      type: Number,
      default: 0.5
    },
  },
  computed: {
    heightVar() {
      return 40 * this.heightPercent;
    },
    waterPercent() {
      return parseFloat(this.heightPercent * 100).toFixed(0);
    },
  }
}
</script>

<style lang="less">
.teacup .percent {
  z-index: 10;
  font-size: 8px;
}

@keyframes move1 {
  0% {
    left: 0;
  }
  100% {
    left: -80px;
  }
}

@keyframes move2 {
  0% {
    left: -20px;
  }
  100% {
    left: -100px;
  }
}

.teacup {
  position: relative;
  display: flex;
  justify-content: center;
  border: 4px solid antiquewhite;
  border-radius: 0 0 16px 16px;
  border-top-width: 0;
  width: 40px;
  height: 40px;
  background-color: #fff3da;
  font-size: 12px;
  font-weight: 100;
  line-height: 24px;
  overflow: hidden;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
  color: rgb(30, 29, 20);
  transform: translateZ(0);
}

.teacup-f,
.teacup-b {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 160px;
  height: 20px;
  clip-path: polygon(0% 20%,
  2% 18%,
  3% 16%,
  5% 14%,
  7% 13%,
  8% 11%,
  10% 10%,
  12% 10%,
  13% 10%,
  15% 10%,
  17% 11%,
  18% 13%,
  20% 14%,
  22% 16%,
  23% 18%,
  25% 20%,
  27% 22%,
  28% 24%,
  30% 26%,
  32% 27%,
  33% 29%,
  35% 30%,
  37% 30%,
  38% 30%,
  40% 30%,
  42% 29%,
  43% 27%,
  45% 26%,
  47% 24%,
  48% 22%,
  50% 20%,
  52% 18%,
  53% 16%,
  55% 14%,
  57% 13%,
  58% 11%,
  60% 10%,
  62% 10%,
  63% 10%,
  65% 10%,
  67% 11%,
  68% 13%,
  70% 14%,
  72% 16%,
  73% 18%,
  75% 20%,
  77% 22%,
  78% 24%,
  80% 26%,
  82% 27%,
  83% 29%,
  85% 30%,
  87% 30%,
  88% 30%,
  90% 30%,
  92% 29%,
  93% 27%,
  95% 26%,
  97% 24%,
  98% 22%,
  100% 20%,
  100% 100%,
  0% 100%);
}

.teacup-f {
  background-color: #5698d3;

  animation: move1 infinite 6s linear;
  transition: height 1s linear;
}

.teacup-b {
  background-color: #3792fc;
  animation: move2 infinite 2s linear;
  transition: height 1s linear;
}
</style>
